<template>
    <div>
        <el-dialog :title="title" :visible.sync="openadd" width="33%">
            <!-- 编辑的区域 -->
            <div class="flex-between">
                <div>
                    <div class="t1">
                        <span>订单id</span>
                    </div>

                    <el-input placeholder="请输入商品iid" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_id" disabled
                        style="width: 180px" />
                </div>
                <div>
                    <span class="t1">订单状态:</span>
                    <el-select v-model="goodsdetail.goods_state" placeholder="请选择订单状态" style="width: 180px" disabled>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <div class="flex-between" style="margin-top: 25px">
                <div>
                    <span class="t1">订单标题:</span>
                    <el-input placeholder="请输入订单标题" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_name" disabled
                        style="width: 180px" />
                </div>
                <div style="margin-left: 30px">
                    <span class="t1">订单数量:</span>
                    <el-input placeholder="请输入订单数量" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_count"
                        style="width: 180px" disabled />
                </div>
            </div>

            <div class="flex-between" style="margin-top: 25px">
                <div>
                    <span class="t1">商品单价:</span>
                    <el-input placeholder="请输入商品单价" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_price"
                        style="width: 120px" disabled />
                </div>
                <div>
                    <span class="t1">订单总金额:</span>
                    <el-input placeholder="请输入订单金额" prefix-icon="el-icon-star-off" v-model="goodsdetail.goods_all"
                        style="width: 120px" />
                </div>
                <div>
                    <span class="t1">是否发货:</span>
                    <el-switch v-model="goodsdetail.if_fahuo" @change="changefh"> </el-switch>
                </div>
            </div>
            <div class="flex-between" style="margin-top: 25px">
                <div>
                    <span class="t1">订单地址:</span>
                    <el-input placeholder="请输入商品图片地址" prefix-icon="el-icon-tickets" v-model="goodsdetail.goods_address"
                        style="width: 490px" />
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="openadd = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </span>
            <!-- 编辑结束 -->
        </el-dialog>
    </div>
</template>

<script>
import { createLogger } from 'vuex';

// import tinymce from "../cpmponent/Tinymce/index.vue";
export default {
    data() {
        return {
            options: [
                {
                    value: "1",
                    label: "待发货",
                },
                {
                    value: "2",
                    label: "待收货",
                },
                {
                    value: "3",
                    label: "退货/退款",
                },
            ],
            setting: {
                height: 500
            },
            openadd: false,
            goodsdetail: {
                goods_id: '',
                goods_name: '',
                goods_small_logo: '',
                goods_count: '',
                goods_price: '',
                goods_address: '',
                goods_if: '',
                goods_state: '',
                goods_all: '',
                if_fahuo: ''
            }
        };
    },
    props: {
        title: ''
    },
    // components: {
    //   tinymce
    // },
    methods: {
        setup(editor) {
            console.log(editor)
        },
        // 编辑选择框改变的
        open(goodsdetail) {
            this.openadd = true
            this.goodsdetail = goodsdetail
        },
        close() {
            this.openadd = false;
        },
        // 修改发货状态
        changefh(value) {
            if (value) {
                this.goodsdetail.goods_if = '1'
                this.goodsdetail.if_fahuo = true
                this.goodsdetail.goods_state = '2'
            } else {
                this.goodsdetail.goods_if = '0'
                this.goodsdetail.if_fahuo = false
                this.goodsdetail.goods_state = '1'
            }
            this.$forceUpdate()

        },
        sure() {
            this.updateordrtListmessage()
        },
        async updateordrtListmessage() {
            let res = await this.$axios.post(this.$IP + '/updateordrtListmessage', {
                goods_state: this.goodsdetail.goods_state,
                goods_all: this.goodsdetail.goods_all,
                goods_address: this.goodsdetail.goods_address,
                goods_if: this.goodsdetail.goods_if,
                goods_id: this.goodsdetail.goods_id
            })
            this.$message.success('修改订单信息成功！')
            this.close()
            this.$emit('gengxin')
        },

    }
};
</script>

<style lang="less">
.tbox {
    margin-bottom: 20px;
}

.w {
    width: 190px;
}

.t1 {
    display: inline-block;
    color: #545c64;
    font-weight: bold;
    width: 90px;
}
</style>